<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地控制器 - 数据同步</title>
    <!-- 引入必要的CSS -->
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="css/all.min.css">
	<link rel="stylesheet" href="css/index.css">
    <style>
        body {
			overflow: auto;
            padding: 20px;
        }
        .table-container {
            margin: 10px auto;
            max-width: 1200px;
            padding: 10px;
            background: #2d2d2d;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
        }
        .dataTables_wrapper .dataTables_filter input {
            margin-left: 0.5em;
            display: inline-block;
            width: auto;
            background-color: #3d3d3d;
            border: 1px solid #4d4d4d;
            color: #fff;
        }
        .dataTables_wrapper .dataTables_length select {
            background-color: #3d3d3d;
            border: 1px solid #4d4d4d;
            color: #fff;
        }
		#dataTable thead th.select-checkbox.sorting::after,
		#dataTable thead th.select-checkbox.sorting::before,
		#dataTable thead th.select-checkbox.sorting_asc::after,
		#dataTable thead th.select-checkbox.sorting_asc::before,
		#dataTable thead th.select-checkbox.sorting_desc::after,
		#dataTable thead th.select-checkbox.sorting_desc::before {
			display: none !important;
		}
		
        .action-buttons {
            margin-bottom: 20px;
        }
		.nowrap {
			white-space: nowrap;
		}
		.table-container .btn-sm {
			padding: 0.25rem 0.5rem;
			font-size: 0.75rem;
			margin-left: 10px;
		}
        .table {
            color: #f8f9fa;
            border: 0px solid #4d4d4d;
        }
		.table td, .table th {
			padding: .5rem;
			vertical-align: top;
			border-top: 0px solid #dee2e6;
		}
        .table thead th {
            border-bottom: 1px solid #4d4d4d;
            background-color: #343a40;
        }
        .table tbody tr {
            border-bottom: 1px solid #4d4d4d;
        }
        .table tbody tr:hover {
            background-color: #4d4d4d;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(255, 255, 255, 0.05);
        }
        .badge {
            font-weight: 500;
            padding: 5px 8px;
        }
        .btn-outline-primary {
            color: #7ab8ff;
            border-color: #7ab8ff;
        }
        .btn-outline-primary:hover {
            background-color: #7ab8ff;
            color: #fff;
        }
        .btn-outline-danger {
            color: #ff7a7a;
            border-color: #ff7a7a;
        }
        .btn-outline-danger:hover {
            background-color: #ff7a7a;
            color: #fff;
        }
        .form-check-input:checked {
            background-color: #7ab8ff;
            border-color: #7ab8ff;
        }
        .pagination .page-item.disabled .page-link {
            background-color: #343a40;
            border-color: #4d4d4d;
        }
        .pagination .page-item .page-link {
            background-color: #343a40;
            border-color: #4d4d4d;
            color: #f8f9fa;
        }
        .pagination .page-item.active .page-link {
            background-color: #7ab8ff;
            border-color: #7ab8ff;
        }
        .pagination .page-item:hover .page-link {
            background-color: #3d3d3d;
        }
    </style>
</head>
<body>
	<!-- 导航栏 -->
    <div id="floating-nav">
        <div class="nav-collapsed"></div>
        <div class="nav-content">
            <div class="nav-icon" data-tooltip="库存监控" data-url="wms-2d.html">
                <i class="fas fa-chart-bar"></i>
            </div>
            <div class="nav-icon" data-tooltip="热力图" data-url="heatmap.html">
                <i class="fas fa-braille"></i>
            </div>
            <div class="nav-icon nav-icon-active" data-tooltip="数据同步" data-url="data-sync.html">
                <i class="fas fa-exchange"></i>
            </div>
        </div>
    </div>
	<div class="title">
	<div class="summary-container">
        <div class="storage-selector">
            <select id="storageSelect">
                <option value="D">国内存储区</option>
                <option value="I">国际存储区</option>
            </select>
        </div>		
    </div>
	</div>
    <div class="container-fluid">
        <div class="table-container">
            <h5><i class="fas fa-table me-2"></i>本地数据操作</h5>
            <div class="action-buttons">
                <button id="btnRefresh" class="btn btn-primary btn-sm me-2">
                    <i class="fas fa-sync-alt me-1"></i> 刷新数据
                </button>
                <button id="btnDeleteSelected" class="btn btn-danger btn-sm me-3" disabled>
                    <i class="fas fa-trash-alt me-1"></i> 删除选中
                </button>
            </div>
            <table id="dataTable" class ="table" style="width:100%">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>电话</th>
                        <th>城市</th>
                        <th>注册日期</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="bootstrap/bootstrap.bundle.min.js"></script>
    <script src="bootstrap/jquery.dataTables.min.js"></script>
    <script src="bootstrap/dataTables.bootstrap5.min.js"></script>
    <script src="bootstrap/dataTables.select.min.js"></script>

	<script src="js/index.js"></script>
	<script src="js/lang1.js"></script>
	
    <script>
		// 模拟JSON数据
		function generateMockData(count) {
			const firstNames = ['张', '李', '王', '赵', '刘', '陈', '杨', '黄', '周', '吴'];
			const lastNames = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军'];
			const cities = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京', '西安', '重庆'];
			const statuses = ['活跃', '禁用', '待验证', '已注销'];
			
			const data = [];
			for (let i = 1; i <= count; i++) {
				const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
				const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
				data.push({
					id: i,
					name: firstName + lastName,
					email: `user${i}@example.com`,
					phone: `1${Math.floor(1000000000 + Math.random() * 9000000000)}`.slice(0, 11),
					city: cities[Math.floor(Math.random() * cities.length)],
					registerDate: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toISOString().split('T')[0],
					status: statuses[Math.floor(Math.random() * statuses.length)],
					selected: false
				});
			}
			return data;
		}
		function initTable(){
			// 初始化DataTable
            const table = $('#dataTable').DataTable({
                dom: '<"top"<"d-flex justify-content-between align-items-center"lf>>rt<"bottom"<"d-flex justify-content-between"ip>>',
				//language: { url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/zh.json'},
				//language: { url: 'i18n/zh.json'},
				language:lang1,
				searchBuilder: {
					columns: [2, 3, 4]
				},
                columns: [
                    { 
                        data: null,
                        orderable: false,
                        className: 'select-checkbox',
                        defaultContent: '',
                        render: function(data, type, row) {
                            return '<input type="checkbox" class="row-select" data-id="' + row.id + '">';
                        }
                    },
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'email' },
                    { data: 'phone' },
                    { data: 'city' },
                    { data: 'registerDate' },
                    { 
                        data: 'status',
                        render: function(data, type, row) {
                            let badgeClass = 'bg-secondary';
                            if (data === '活跃') badgeClass = 'bg-success';
                            else if (data === '禁用') badgeClass = 'bg-danger';
                            else if (data === '待验证') badgeClass = 'bg-warning';
                            return '<span class="badge ' + badgeClass + '">' + data + '</span>';
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function(data, type, row) {
                            return '<div class="d-flex nowrap">' +
							   '<button class="btn btn-sm btn-outline-primary view-btn" data-id="' + row.id + '" ' +
							   'title="查看" data-bs-toggle="tooltip">' +
							   '<i class="fas fa-eye"></i></button>' +
							   '<button class="btn btn-sm btn-outline-danger delete-btn" data-id="' + row.id + '" ' +
							   'title="删除" data-bs-toggle="tooltip">' +
							   '<i class="fas fa-trash-alt"></i></button>' +
							   '</div>';
                        }
                    }
                ],
                columnDefs: [
                    { width: '30px', targets: 0 },
                    { width: '50px', targets: 1 },
                    { width: '120px', targets: 8 }
                ],
                select: {
                    style: 'multi',
                    selector: 'td:first-child',
					info: false
                },
                pageLength: 10,
                processing: true,
                serverSide: false,
                ajax: function(data, callback, settings) {
                    // 实际应用中AJAX请求服务器数据
                    // 模拟数据
                    const mockData = generateMockData(100);
                    callback({
                        draw: data.draw,
                        data: mockData,
                        recordsTotal: 100,
                        recordsFiltered: 100
                    });
                },
                initComplete: function() {
                    $('.dataTables_length label').prepend('<i class="fas fa-list-ol me-2"></i>');
                }
            });
		}
		
        $(document).ready(function() {

            
			initTable();

            // 刷新数据
            $('#btnRefresh').click(function() {
                $(this).html('<i class="fas fa-spinner fa-spin"></i> 加载中...');
                setTimeout(() => {
                    table.ajax.reload();
                    $('#selectAll').prop('checked', false);
                    $('#btnDeleteSelected').prop('disabled', true);
                    $(this).html('<i class="fas fa-sync-alt"></i> 刷新数据');
                }, 800);
            });


            // 更新删除选中按钮状态
            function updateDeleteButtonState() {
                const hasSelected = $('.row-select:checked').length > 0;
                $('#btnDeleteSelected').prop('disabled', !hasSelected);
            }
            // 全选/取消全选
            $('#selectAll').click(function() {
                const isChecked = $(this).prop('checked');
                $('.row-select').prop('checked', isChecked);
                updateDeleteButtonState();
            });
            // 行选择变化时更新全选状态
            $(document).on('change', '.row-select', function() {
                const allChecked = $('.row-select:checked').length === $('.row-select').length;
                $('#selectAll').prop('checked', allChecked);
                updateDeleteButtonState();
            });


            // 删除选中行
            $('#btnDeleteSelected').click(function() {
                const selectedIds = [];
                $('.row-select:checked').each(function() {
                    selectedIds.push($(this).data('id'));
                });
                
                if (confirm('确定要删除选中的 ' + selectedIds.length + ' 条记录吗？')) {
                    // 实际应用中这里应该是AJAX请求删除数据
                    $(this).html('<i class="fas fa-spinner fa-spin"></i> 删除中...');
                    setTimeout(() => {
                        alert('已删除ID为: ' + selectedIds.join(', ') + ' 的记录');
                        table.ajax.reload();
                        $('#selectAll').prop('checked', false);
                        $(this).html('<i class="fas fa-trash-alt"></i> 删除选中');
                        $('#btnDeleteSelected').prop('disabled', true);
                    }, 800);
                }
            });

            // 查看按钮
            $(document).on('click', '.view-btn', function() {
                const id = $(this).data('id');
                const rowData = table.row($(this).parents('tr')).data();
                
                const modalContent = `
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold">ID:</div>
                        <div class="col-md-8">${rowData.id}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold">姓名:</div>
                        <div class="col-md-8">${rowData.name}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold">邮箱:</div>
                        <div class="col-md-8">${rowData.email}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold">电话:</div>
                        <div class="col-md-8">${rowData.phone}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold">城市:</div>
                        <div class="col-md-8">${rowData.city}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold">注册日期:</div>
                        <div class="col-md-8">${rowData.registerDate}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 fw-bold">状态:</div>
                        <div class="col-md-8">${rowData.status}</div>
                    </div>
                `;
                
				const modalId = 'userDetailModal';
				$(`#${modalId}`).remove();
				
				const modalHTML = `
				<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}Label" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered">
						<div class="modal-content bg-dark text-light">
							<div class="modal-header border-secondary">
								<h5 class="modal-title" id="${modalId}Label">
									<i class="fas fa-info-circle me-2"></i>&nbsp;详情
								</h5>
							</div>
							<div class="modal-body">
								${modalContent}
							</div>
						</div>
					</div>
				</div>`;
				$('body').append(modalHTML);
				const modal = new bootstrap.Modal(document.getElementById(modalId));
				modal.show();
				
				$(`#${modalId}`).on('hidden.bs.modal', function() {
					$(this).remove();
				});
            });

            // 删除按钮
            $(document).on('click', '.delete-btn', function() {
				const id = $(this).data('id');
				const btn = $(this);
				const row = btn.parents('tr');
				
				$('#deleteConfirmModal').remove();
				
				const modalHTML = `
				<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered">
						<div class="modal-content bg-dark text-light">
							<div class="modal-header border-secondary">
								<h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2 text-warning"></i></h5>
							</div>
							<div class="modal-body">
								确定要删除ID为 <strong>${id}</strong> 的记录吗？此操作不可撤销！
							</div>
							<div class="modal-footer border-secondary">
								<button type="button" class="btn btn-danger" id="confirmDeleteBtn">
									确认删除
								</button>
							</div>
						</div>
					</div>
				</div>`;
				$('body').append(modalHTML);
				
				const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
				modal.show();
				
				$('#confirmDeleteBtn').on('click', function() {
					btn.html('<i class="fas fa-spinner fa-spin me-1"></i> 删除中');
					
					modal.hide();
					
					// 模拟删除延迟
					setTimeout(() => {
						// 实际应用中这里应该是AJAX请求删除数据
						table.row(row).remove().draw();
						
						// 显示删除成功提示
						const toastHTML = `
						<div class="toast align-items-center text-white bg-danger border-0 position-fixed bottom-0 end-0 m-3" role="alert" aria-live="assertive" aria-atomic="true">
							<div class="d-flex">
								<div class="toast-body">
									<i class="fas fa-check-circle me-2"></i>已成功删除ID为 ${id} 的记录
								</div>
								<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
							</div>
						</div>`;
						
						$('body').append(toastHTML);
						const toast = new bootstrap.Toast($('.toast')[0]);
						toast.show();
						
						// 提示框自动消失后移除
						$('.toast').on('hidden.bs.toast', function() {
							$(this).remove();
						});
					}, 500);
				});
				
				$('#deleteConfirmModal').on('hidden.bs.modal', function() {
					$(this).remove();
				});
			});
        });
    </script>
</body>
</html>